<template>
    <el-collapse style="width: 97%">
        <el-collapse-item name="1" class="collapse">
            <template #title>
                <span class="collapseTitle">
                    表单组件
                </span>
            </template>
            <div>
                <draggable
                    :list="list"
                    ghost-class="ghostClass"
                    chosen-class="chosenClass"
                    animation="300"
                    :force-fallback="true"
                    :sort="false"
                    :group="{name:'lowcode',pull:'clone',put:false}"
                    @start="onStart"
                    :clone="cloneDefaultField"
                    item-key="sourceId"
                >
                    <template #item="{ element }">
                        <div class="itemClass">
                            {{ element.name }}
                        </div>
                    </template>
                </draggable>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script name="FormIndex" lang="ts" setup>
import {deepCopy} from "@/utils/ywuCommon";
import {ref} from "vue";

let list = ref([
    {
        name: "全局表单底座", title: "表单底座编辑", component: "GlobalFormComponent", drawerComponent: "GlobalFormDrawer", sourceId: 1,
        propJson: {
            labelLength: "20%",
            editFlag: true,
            showButtons: ["Submit", "Cancel"],
            list: [],
            formCancelAction: [{isAsyncAction: false}],
            formSubmitAction: [{isAsyncAction: false}],
            apiType: "MSOA",
            apiMethod: "GET",
            apiParamList: [],
            apiResponseList: [],
            apiResponseJsonPath: "",
            submitName: "提交",
            submitIcon: "",
            cancelName: "取消",
            cancelIcon: "",
            resetName: "重置",
            resetIcon: "",
            isInline: false,
            isShowSuccessFlag: true
        }
    },
    {
        name: "输入框", title: "输入框编辑", component: "InputComponent", drawerComponent: "InputDrawer", sourceId: 2,
        propJson: {
            editFlag: true,
            bindVariable: "",
            isDisable: false,
            isClearable: false,
            isPassword: false,
            prefixIcon: "",
            suffixIcon: "",
            isTextArea: false,
            isAutoSize: false,
            textAreaMinRow: "2",
            textAreaMaxRow: "4",
            size: "default",
            isLengthLimit: false,
            maxLength: "20",
            placeHolder: ""
        }
    },
    {
        name: "下拉选择框", title: "下拉选择框编辑", component: "SelectComponent", drawerComponent: "SelectDrawer", sourceId: 3,
        propJson: {
            editFlag: true,
            bindVariable: "",
            isDisable: false,
            isClearable: false,
            size: "default",
            placeHolder: "",
            optionLabel: "$.label",
            optionValue: "$.value",
            optionValueType: "custom",
            optionsCustom: "[{\"label\": \"下拉选项一\", \"value\": \"test1\"},{\"label\": \"下拉选项二\", \"value\": \"test2\"}]",
            optionsCustomValueType: "Array",
            optionsVariableParam: "",
            apiType: "MSOA",
            apiMethod: "GET",
            apiParamList: [],
            apiResponseList: [],
            apiResponseJsonPath: "",
            actionInfo: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "Array", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
            isAddChangeAction: false,
            changeAction: [{isAsyncAction: false}],
            isReloadPage: false,
            isFilterable: false,
            isClickAction: false,
            isMultiple: false, // 是否支持多选
            isCollapseTags: false, // 是否合并标签展示
            maxCollapseTags: 1, // 最大合并标签数
            isCollapseTagsTooltip: false, // 是否鼠标悬浮展示所有标签
        }
    },
    {
        name: "数字输入框", title: "数字输入框编辑", component: "InputNumberComponent", drawerComponent: "InputNumberDrawer", sourceId: 4,
        propJson: {
            editFlag: true,
            bindVariable: "", // 绑定的变量
            isDisable: false, // 是否禁用
            isMinNum: false, // 是否设置最小值
            minNum: 1, // 最小值
            isMaxNum: false, // 是否设置最大值
            maxNum: 100, // 最大值
            step: 1, // 每次加或减的步长
            stepStrictly: false, // 是否只能输入步长的倍数
            size: "default", // 组件尺寸
            controlsPosition: "", // 控制按钮位置 空为左右两侧 - right 为右侧上下
        }
    },
    {
        name: "日期输入框", title: "日期输入框编辑", component: "DateComponent", drawerComponent: "DateDrawer", sourceId: 5,
        propJson: {
            editFlag: true,
            size: "default",
            isDisable: false,
            isClearable: false,
            type: "datetime",
            isFieldSplit: false, // 如果为范围时间的话是否需要进行字段拆分，默认为["1111", "2222"]
            beginTimeBind: "", // 开始时间绑定字段
            endTimeBind: "", // 结束时间绑定字段
            bindVariable: "", // 普通绑定字段
        }
    },
    {
        name: "单选框", title: "单选框编辑", component: "RadioComponent", drawerComponent: "RadioDrawer", sourceId: 6,
        propJson: {
            editFlag: true,
            bindVariable: "",
            isDisable: false,
            size: "default",
            optionLabel: "$.label",
            optionValue: "$.value",
            actionInfo: {optionValueType: "custom", optionsCustom: "[{\"label\": \"选项一\", \"value\": \"test1\"},{\"label\": \"选项二\", \"value\": \"test2\"}]", optionsCustomValueType: "Array", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
            isAddChangeAction: false,
            isReloadPage: false,
            changeAction: [{isAsyncAction: false}],
            isVertical: false, // 是否纵向排列
        }
    },
    {
        name: "复选框", title: "复选框编辑", component: "CheckBoxComponent", drawerComponent: "CheckBoxDrawer", sourceId: 7,
        propJson: {
            editFlag: true,
            bindVariable: "",
            isDisable: false,
            size: "default",
            optionLabel: "$.label",
            optionValue: "$.value",
            actionInfo: {optionValueType: "custom", optionsCustom: "[{\"label\": \"选项一\", \"value\": \"test1\"},{\"label\": \"选项二\", \"value\": \"test2\"}]", optionsCustomValueType: "Array", optionsVariableParam: "",
                apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
            isAddChangeAction: false,
            isReloadPage: false,
            changeAction: [{isAsyncAction: false}]
        }
    },
    {
        name: "滑块开关", title: "滑块开关编辑", component: "SwitchComponent", drawerComponent: "SwitchDrawer", sourceId: 8,
        propJson: {
            editFlag: true,
            bindVariable: "",
            isDisable: false,
            size: "default",
        }
    }
]);

function cloneDefaultField(e) {
    let copyE = deepCopy(e);
    copyE.ruleInfo = {
        ruleInfoList: []
    }
    return copyE;
}

function onStart(e) {
    e.item._underlying_vm_.id = generateUUID();
}
function randomNumber() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
function generateUUID() {
    return (randomNumber() + randomNumber() + "-" + randomNumber() + "-" + randomNumber() +
        "-" + randomNumber() + "-" + randomNumber() + randomNumber() + randomNumber());
}
</script>

<style scoped lang="less">
.collapse {
    .collapseTitle {
        padding-left: 2%;
        font-size: 15px;
        font-weight: bold;
    }
    .ghostClass {

    }
    .chosenClass {

    }
    .itemClass {
        font-size: 13px;
        color: #606266;
        text-align: center;
        width: 90%;
        line-height: 250%;
        margin-left: 5%;
        //去除光标
        caret-color: transparent;
        background-color: #FAFCFF;
        transition: box-shadow 0.3s ease;
        border: 1px solid #F0F2F5;
        border-radius: 5px;
        margin-bottom: 2%;
    }
    .itemClass:hover{
        cursor: pointer;
        color: #409EFF;
        background-color: #EBEEF5;
    }
}
</style>